<template>
  <div class="timer-app">
    <el-progress
      class="progress"
      type="circle"
      :percentage="percent"
    ></el-progress>
    <div :class="['time', isred ? 'red' : '']">
      {{ bu(parseInt(totleTime / 60) % 60) }}&nbsp;
      <span :style="[isshowPoint ? opacity1 : opacity0]">:</span>
      &nbsp;{{ bu(parseInt(totleTime % 60)) }}
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
  data() {
    return {
      num: 500,
      isshowPoint: true,
      opacity0: {
        opacity: 1,
        fontWeight: "bold",
      },
      opacity1: {
        opacity: 0,
        fontWeight: "bold",
      },
      isred: false,
    };
  },
  methods: {
    ...mapMutations("question", [
      "SET_DIRLOG",
      "SET_TIMEOVER",
      "SET_TOTALTIME",
      "SET_TIMER",
    ]),
    bu(n) {
      return n < 10 ? "0" + n : n;
    },
    timeReduce() {
      this.SET_TIMER(
        setInterval(() => {
          this.SET_TOTALTIME(this.totleTime - 1);
          if (this.totleTime <= 0) {
            clearInterval(this.timer);
            this.SET_DIRLOG(true);
            this.SET_TIMEOVER(true);
          }
          if (this.totleTime <= 300) {
            this.isred = true;
          }
        }, 1000)
      );
    },
    point() {
      setInterval(() => {
        this.num += 500;
        if (this.num % 1000 == 0) {
          this.isshowPoint = true;
        } else {
          this.isshowPoint = false;
        }
      }, 500);
    },
    destroyed() {
      clearInterval(this.timer);
    },
  },
  created() {
    this.timeReduce();
    this.point();
  },
  computed: {
    ...mapState("question", ["totleSecond", "totleTime", "timer"]),
    percent() {
      return (
        (
          ((this.totleSecond - this.totleTime) / this.totleSecond) *
          100
        ).toFixed(2) * 1
      );
    },
  },
};
</script>

<style scoped>
.timer-app {
  position: relative;
}

.progress {
  position: absolute;
  left: 50%;
  transform: translate(-50%);
}

.time {
  width: 52px;
  background-color: #fff;
  position: absolute;
  top: 55px;
  left: 53%;
  transform: translate(-50%);
}

.red {
  color: red;
}
</style>
